<template>
  <div class="login-page">
    <div class="login">
        <h2>Login</h2>
        <div class="row">
            <span>账号：</span>
            <input type="text" name="username" v-model="username" maxlength="20">
        </div>
        <div class="row">
            <span>密码：</span>
            <input type="password" name="password" v-model="password" maxlength="20">
        </div>
        <div class="buttons-row">
            <button @click="userLogin">登录</button>
            <button @click="toRegister">注册</button>
        </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { ElMessage } from 'element-plus'
import router from '../router'
import axios from 'axios'

export default {
    name: 'LoginPage',
    setup() {
        let userInfo = reactive({
            username: '',
            password: ''
        })
        
        const userLogin = () => {
            if(!userInfo.username || !userInfo.password) {
                ElMessage.error('用户名和密码不能为空！')
                return
            } else if(userInfo.username.length < 4 || userInfo.password.length < 4) {
                ElMessage.error('用户名或密码错误！')
                return
            }
            axios.post('http://localhost/api/login', {
                ...userInfo
            }).then(res => {
                if(res.data.allowed) {
                    //登陆成功弹窗
                    ElMessage.success('登录成功,欢迎你！')
                    sessionStorage.setItem('token', res.data.token)//收取token
                    router.replace('/home')
                } else {
                    //登录失败弹窗
                    ElMessage.error('用户名或密码错误！')
                }
            }).catch(err => {
                ElMessage.error('未知错误！')
                console.log(err.message)
            })
        }
        const toRegister = () => {
            router.push('/register')
        }

        return {
            ...toRefs(userInfo),
            userLogin,
            toRegister
        }
    }
}
</script>

<style scoped>
    .login-page {
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        background: url(@/assets/Type-Moon.png) no-repeat;
        background-size: cover;
    }
    .login {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 350px;
        height: 380px;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        backdrop-filter: blur(10px);
        letter-spacing: 1px;
    }
    .row {
        display: flex;
        align-items: center;
        margin: 10px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
    }
    h2 {
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.9);
    }
    input {
        width: 250px;
        height: 35px;
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 5px;
        box-sizing: border-box;
        transition: 0.2s;
        outline: none;
        padding: 0 10px;
        letter-spacing: 1px;
    }
    .buttons-row {
        display: flex;
        justify-content: center;
        width: 250px;
    }
    button {
        width: 120px;
        height: 35px;
        margin: 0 5px;
        border: 1px solid rgba(197, 81, 58, 0.8);
        background: rgba(197, 81, 58, 0.5);
        color: rgba(255, 255, 255, 0.9);
        border-radius: 5px;
        transition: 0.2s;
    }
    button:hover {
        border: 1px solid rgba(248, 108, 76, 0.8);
        background: rgba(248, 108, 76, 0.5);
    }
</style>